<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
     <div [innerHTML]="'DEMO.LIST.DESCRIPTION' | translate"></div>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-list</h3>
        <p>{{'DEMO.LIST.LIST-GROUP' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>hover</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.LIST.HOVER' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-list-item</h3>
        <p>{{'DEMO.LIST.LIST-ITEM' | translate}}</p>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-avatar</h3>
        <p>{{'DEMO.LIST.AVATAR' | translate}}</p>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;ListModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-list class="free-box">
              <free-list-item>
                <free-icon icon="user"></free-icon>
                inBox
              </free-list-item>
              <free-list-item>
                <free-icon icon="user"></free-icon>
                inBox
              </free-list-item>
              <free-list-item>
                <free-icon icon="user"></free-icon>
                inBox
              </free-list-item>
              <free-list-item>
                <free-icon icon="user"></free-icon>
                inBox
              </free-list-item>
            </free-list>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-list class="free-box"&gt;
                &lt;free-list-item&gt;
                  &lt;free-icon icon="user"&gt;&lt;/free-icon&gt;
                  inBox
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-icon icon="user"&gt;&lt;/free-icon&gt;
                  inBox
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-icon icon="user"&gt;&lt;/free-icon&gt;
                  inBox
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-icon icon="user"&gt;&lt;/free-icon&gt;
                  inBox
                &lt;/free-list-item&gt;
              &lt;/free-list&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Media List</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-list class="free-box">
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
              </free-list-item>
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
              </free-list-item>
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
              </free-list-item>
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
              </free-list-item>
            </free-list>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-list class="free-box"&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                &lt;/free-list-item&gt;
              &lt;/free-list&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Media List</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-list class="free-box">
              <free-list-item>
                <free-avatar [circle]="true">
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
              </free-list-item>
            </free-list>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-list class="free-box"&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar [circle]="true"&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                &lt;/free-list-item&gt;
              &lt;/free-list&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">HOVER</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-list [hover]="true" class="free-box">
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
                <button fButton>
                  <free-icon icon="star"></free-icon>
                </button>
              </free-list-item>
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
                <button fButton>
                  <free-icon icon="star"></free-icon>
                </button>
              </free-list-item>
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
                <button fButton>
                  <free-icon icon="star"></free-icon>
                </button>
              </free-list-item>
              <free-list-item>
                <free-avatar>
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                inBox
                <button fButton>
                  <free-icon icon="star"></free-icon>
                </button>
              </free-list-item>
            </free-list>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-list [hover]="true" class="free-box"&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                  &lt;button fButton&gt;
                    &lt;free-icon icon="star"&gt;&lt;/free-icon&gt;
                  &lt;/button&gt;
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                  &lt;button fButton&gt;
                    &lt;free-icon icon="star"&gt;&lt;/free-icon&gt;
                  &lt;/button&gt;
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  inBox
                  &lt;button fButton&gt;
                    &lt;free-icon icon="star"&gt;&lt;/free-icon&gt;
                  &lt;/button&gt;
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                   &lt;free-avatar&gt;
                     &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                   &lt;/free-avatar&gt;
                   inBox
                  &lt;button fButton&gt;
                   &lt;free-icon icon="star"&gt;&lt;/free-icon&gt;
                  &lt;/button&gt;
                &lt;/free-list-item&gt;
              &lt;/free-list&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">MORE</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-list class="free-box" [line]="true">
              <free-list-item>
                <free-avatar large="true">
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                <span>me, Scott, Jennifer</span>
                <p class="text-muted">Wish I could come, but I'm out of town ...</p>
              </free-list-item>
              <free-list-item>
                <free-avatar large="true">
                  <free-image src="assets/images/user.jpg"></free-image>
                </free-avatar>
                <span>me, Scott, Jennifer</span>
                <p class="text-muted">Wish I could come, but I'm out of town ...</p>
                <button fButton>
                  <free-icon icon="star"></free-icon>
                </button>
              </free-list-item>
            </free-list>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-list class="free-box" [line]="true"&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar large="true"&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  &lt;span&gt;me, Scott, Jennifer&lt;/span&gt;
                  &lt;p class="text-muted"&gt;Wish I could come, but I'm out of town ...&lt;/p&gt;
                &lt;/free-list-item&gt;
                &lt;free-list-item&gt;
                  &lt;free-avatar large="true"&gt;
                    &lt;free-image src="assets/images/user.jpg"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  &lt;span&gt;me, Scott, Jennifer&lt;/span&gt;
                  &lt;p class="text-muted"&gt;Wish I could come, but I'm out of town ...&lt;/p&gt;
                  &lt;button fButton&gt;
                    &lt;free-icon icon="star"&gt;&lt;/free-icon&gt;
                  &lt;/button&gt;
                &lt;/free-list-item&gt;
              &lt;/free-list&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
